package com.csw.compose.ui.module.component.base

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview
@Composable
fun SliderPagePreview() {
    BasePage({}, "滑块（Slider）") {
        SliderPage()
    }
}

class SliderPageData {
    companion object : Destination("SliderPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/slider?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SliderPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("滑块，类似Seekbar用户可以拖动滑块在范围内选择数值")

        LargeSpacer()
        val progress = remember { mutableFloatStateOf(50f) }
        Text(progress.floatValue.toString())
        Slider(
            value = progress.floatValue,
            valueRange = 0f..100f,
            steps = 9,
            onValueChange = { progress.floatValue = it },
            onValueChangeFinished = {

            }
        )
        UlItem("Slider")
        LabelText("滑块组件，可以设置数据区间、进度、监听进度改变")
        OlItem(1,"value")
        LabelText("进度值")
        OlItem(2,"valueRange")
        LabelText("数值区间")
        OlItem(3,"steps")
        LabelText("步数，决定开始与结束位置之间的刻度数量")
        OlItem(4,"onValueChange")
        LabelText("进度改变监听")
        OlItem(5,"onValueChangeFinished")
        LabelText("进度改变完成的监听")

        LargeSpacer()
        val rangeValue = remember { mutableStateOf(5f..100f) }
        Text("${rangeValue.value.start}-${rangeValue.value.endInclusive}")
        RangeSlider(
            value =  rangeValue.value,
            onValueChange = {
                rangeValue.value = it
            },
            valueRange = 0f .. 10000f
        )
        UlItem("RangeSlider")
        LabelText("区间滑块组件，可以选择一段数值区间")
    }
}